<template>
	<view class="navBox">
		<progress :percent="progress" show-info stroke-width="3" @animationend="onAnimationEnd" />
		<button :class="progress>= 100?'fnish':''" @click="loadImg">下载完成</button>
		<image src="" mode=""></image>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	//进度条的变量
	const progress = ref(0);
	const timer = ref(null);
	//页面一加载就执行定时器函数
	onMounted(() => {
		startAnimation();
	});
	//给进度条设置定时器
	const startAnimation = () => {
		timer.value = setInterval(() => {
			progress.value += 10;
			if (progress.value >= 100) {
				clearAnimation();
			}
		}, 300);
	};
	//清除定时器
	const clearAnimation = () => {
		clearInterval(timer.value);
	};

	const onAnimationEnd = () => {
		// 进度条动画结束后执行的操作
	};
	//导航栏的返回按钮


	const loadImg = () => {
		uni.navigateTo({
			url: '/page_report/report_share/report_share'
		})
	}
</script>
<style lang="scss">
	.navBox {
		margin-top: 50%;
	}

	.fnish {
		background-color: #09BB07;
		color: #fff;
	}
</style>